<template>
  <div class="warp-header">
    <div class="padding-left"></div>
    <div class="warp-img">
      <img class="log_style" :src="require('../assets/img/Flogo.png')" style="position: absolute; top: 6%; left: 10%" />
    </div>
    <div class="padding-center"></div>
    <div class="warp-center">
      <ul class="df flex-center">
        <li class="hover-li active-line">
          <router-link to="/home">
            <i class="el-icon-s-home"></i>
            <a class="list-block"> Home </a>
          </router-link>
        </li>
        <li class="hover-li active-line">
          <router-link to="">
            <i class="el-icon-data-analysis"></i>
            <el-dropdown class="list-block" placement="bottom-start" @command="handleCommand">
              <span class="el-dropdown-link">
                <a class="list-block"> Data Analysis </a>
              </span>
              <template #dropdown>
                <el-dropdown-menu style="font-weight: 600">
                  <el-dropdown-item class="clearfix" command="/dataAnalysis/resultAnalysis">
                    <span style="font-size: 15px; padding: 3px 0px">Result Analysis</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" command="/dataAnalysis/questionnaireAnalysis">
                    <span style="font-size: 15px; padding: 3px 0px">Questionnaire Analysis</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </router-link>
        </li>
        <li class="hover-li active-line">
          <router-link to="">
            <i class="el-icon-s-operation"></i>
            <el-dropdown class="list-block" placement="bottom-start" @command="handleCommand">
              <span class="el-dropdown-link">
                <a class="list-block"> Questionnaires Management </a>
              </span>
              <template #dropdown>
                <el-dropdown-menu style="font-weight: 600">
                  <el-dropdown-item class="clearfix" command="/questionnaireManagement/questionnaireDatabase">
                    <span style="font-size: 15px; padding: 3px 0px">Questionnaires Database</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" command="/questionnaireManagement/questionnaireReview">
                    <span style="font-size: 15px; padding: 3px 0px">Questionnaires Review</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" command="/questionnaireManagement/personalQuestionnaires">
                    <span style="font-size: 15px; padding: 3px 0px">Personal Questionnaires</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" command="/questionnaireManagement/newQuestionnaire">
                    <span style="font-size: 15px; padding: 3px 0px">New Questionnaire</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </router-link>
        </li>
        <li class="hover-li active-line">
          <router-link to="">
            <i class="el-icon-setting"></i>
            <el-dropdown class="list-block" placement="bottom-start" @command="handleCommand">
              <span class="el-dropdown-link">
                <a class="list-block"> System Management </a>
              </span>
              <template #dropdown>
                <el-dropdown-menu style="font-weight: 600">
                  <el-dropdown-item class="clearfix" command="/systemManagement/userManagement">
                    <span style="font-size: 15px; padding: 3px 0px">User Management</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" command="/systemManagement/dataDictionary">
                    <span style="font-size: 15px; padding: 3px 0px">Data Dictionary</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                  <el-dropdown-item class="clearfix" command="/systemManagement/roleManagement">
                    <span style="font-size: 15px; padding: 3px 0px">Role Management</span>
                    <el-badge class="mark" />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="spacer"></div>

    <div class="right-header">
      <div style="width: 200px">
        <span class="p_style">Welcome, {{ nickname }}</span>
        <el-dropdown class="list-block" trigger="click">
          <span class="el-dropdown-link">
            <el-button type="text">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </span>
          <template #dropdown>
            <el-dropdown-menu style="width: 170px; font-weight: 600">
              <el-dropdown-item class="clearfix">
                <span style="font-size: 15px; padding: 3px 0px" @click="logout">
                  <i class="el-icon-s-release"></i>
                  Logout
                </span>
                <el-badge class="mark" />
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="padding-right"></div>
  </div>
</template>

<script>
import api from "@/api/api.js";
import cookie from "js-cookie";
export default {
  data() {
    return {
      nickname: "",
    };
  },
  mounted() {
    this.getNickname();
    this.checkLoginStatus();
  },
  methods: {
    //页面跳转
    handleCommand(command) {
      this.$router.push(command);
    },
    //获取个人信息
    getNickname() {
      const id = cookie.get('id')
      api
        .getUserInfo(id)
        .then((response) => {
          if (response.code == "200") {
            this.nickname = response.body.nickname;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    logout() {
      cookie.set("id", "", { domain: "localhost" });
      cookie.set("token", "token", { domain: "localhost" });
      this.$router.push("/");
    },
    checkLoginStatus() {
      api
        .checkToken()
        .then((response) => {
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.warp-header {
  position: sticky;
  top: 0;
  z-index: 201;
  width: 100%;
  display: flex;
  height: 80px;
  align-items: baseline;
  background-image: url("../assets/img/banner.jpg");

  & .padding-left {
    width: 6%;
  }

  & .warp-img {
    display: flex;
    align-items: center;
    width: 100px;
    height: 50px;
  }

  & .padding-center {
    width: 12px;
  }

  & .warp-center {
    /*display: flex;*/
    /*align-items: center;*/
    width: 71%;
    position: relative;
    top: -1px;
    left: 50px;

    & .flex-center li {
      margin-left: 30px;

      & .list-block {
        display: inline-block;
        color: rgb(24, 23, 23);
        font-weight: 600;
        font-size: 20px;
      }
    }

    & .hover-li {
      display: inline;

      &:hover {
        .list-block {
          text-decoration: underline;
          text-underline-offset: 3px;
        }
      }
    }
  }

  & .spacer {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
  }

  & .right-header {
    position: relative;
    top: -1px;
    text-align: end;

    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      margin-right: 20px;
    }

    & .el-tooltip__trigger {
      color: #ffffff;
      font-weight: 500;
      font-size: 16px;
    }
  }

  & .padding-right {
    width: 105px;
  }
}

.p_style {
  color: rgb(0, 0, 0);
  font-size: 18px;
  padding-right: 10px;
  font-weight: 600;
}
</style>